<template>
  <view class="min-h-screen">
    <view class="bg-white text-white pt-8">
      <view class="container mx-auto px-4">
        <view class="text-4xl font-bold text-center mb-4 text-red-500 mt-2">证书样本</view>
        <view class="border border-red-300 rounded-lg p-8 max-w-8xl mx-auto border-t-4 border-b-4 border-l-4 border-r-4">
          <image
            src="https://cdnoss.kaoshixing.com/ksx_prod/618654/background/618654/20250611/1749612380633.jpg"
            mode="widthFix"
            class="w-full h-auto rounded-lg"
            style="max-width: 1180px"
          />
        </view>
      </view>
    </view>

    <view class="py-20 bg-gray-50">
      <view class="container mx-auto px-4">
        <view class="text-center" style="margin-bottom: 40rpx;">
          <view style="font-size: 36rpx;font-weight: bold;color: #333;display: inline-block;white-space: nowrap;">证书说明</view>
        </view>
        <view style="display: flex;flex-wrap: wrap;justify-content: space-around;">
          <block v-for="(item, index) in items" :key="index">
            <view style="width: 45%;margin-bottom: 30rpx;padding: 20rpx;box-sizing: border-box;">
              <view style="font-size: 30rpx;font-weight: bold;margin-bottom: 20rpx;color: #333;">{{item.title}}</view>
              <view style="font-size: 26rpx;color: #666;line-height: 1.5;">{{item.content}}</view>
            </view>
          </block>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          title: "权威认证",
          content: "由政府机构认证，具有广泛认可度",
        },
        {
          title: "终身有效",
          content: "证书终身有效，可在线查询验证",
        },
        {
          title: "就业保障",
          content: "与多家机构合作，提供就业推荐",
        },
      ],
    };
  },
};
</script>

<style>
.min-h-screen {
  min-height: 100vh;
}
.bg-white {
  background-color: #fff;
}
.text-white {
  color: #fff;
}
.pt-8 {
  padding-top: 32rpx;
}
.container {
  width: 100%;
  margin: 0 auto;
}
.px-4 {
  padding-left: 16rpx;
  padding-right: 16rpx;
}
.text-4xl {
  font-size: 36rpx;
}
.font-bold {
  font-weight: bold;
}
.text-center {
  text-align: center;
}
.mb-4 {
  margin-bottom: 16rpx;
}
.text-red-500 {
  color: #f56c6c;
}
.mt-2 {
  margin-top: 8rpx;
}
.border {
  border-width: 1px;
}
.border-red-300 {
  border-color: #f56c6c;
}
.rounded-lg {
  border-radius: 8rpx;
}
.p-8 {
  padding: 32rpx;
}
.max-w-8xl {
  max-width: 100%;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.border-t-4 {
  border-top-width: 4px;
}
.border-b-4 {
  border-bottom-width: 4px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-r-4 {
  border-right-width: 4px;
}
.w-full {
  width: 100%;
}
.h-auto {
  height: auto;
}
.py-20 {
  padding-top: 80rpx;
  padding-bottom: 80rpx;
}
.bg-gray-50 {
  background-color: #f9fafb;
}
.text-3xl {
  font-size: 30rpx;
}
.mb-12 {
  margin-bottom: 48rpx;
}
.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.grid-cols-3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.grid-cols-3 view {
  width: 30%;
  margin-bottom: 32rpx;
}
.gap-8 {
  gap: 32rpx;
}
.text-xl {
  font-size: 20rpx;
}
.text-gray-600 {
  color: #666;
}
</style>